<template>
    <el-card>
        <template #header>
            <el-page-header @back="onBack">
                <template #breadcrumb>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">
                            homepage
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>route</el-breadcrumb-item>
                    </el-breadcrumb>
                </template>

            </el-page-header>
        </template>
        <div id="baidu"></div>
    </el-card>
</template>

<script setup>
import { onMounted, onUnmounted,  nextTick } from 'vue'
import { useRouter } from 'vue-router'

let router = useRouter()
let map

function loadScript() {
    let src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=onZj8L6KdZSrb8OcKtAWX66f6Wz8OKvc&callback=initialize'
    var script = document.createElement("script");
    script.src = src;
    var scripts = document.querySelectorAll('script')
    let baiduScript = [...scripts].findIndex(item => item.src == src)

    if (baiduScript == -1) {
        document.body.append(script)
    } else {
        initialize()
    }
}
const initialize = () => {
    map = new BMapGL.Map("baidu"); //创建地图实例
    var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
    map.centerAndZoom(point, 15); //地图初始化，同时设置地图展示级别
}
window.initialize = initialize
onMounted(loadScript)
onUnmounted(() => {
    map.destroy()
})
const onBack = () => {
    router.push('home')
}
</script>
<style>
#baidu {
    height: 600px;
}
</style>
